<template>
  <div class="member-info-page">
    <div id="setup-page" :style="{
    width:'100%',
    height: (this.getWinSize().height-43-this.getSafeArea().top)+'px',
    paddingTop:(this.getSafeArea().top+43)+'px'
  }">
      <div class="page-title" :style="{
      top:(this.getSafeArea().top)+'px'
    }">
        <div id="back-button" @click="$router.push('/MemberHome')">
          <i href="javascript:void(0)" class="el-icon-arrow-left"></i>
        </div>
        <span>个人资料</span>
      </div>


      <div class="form">
        <div class="item" style="line-height: 30px; padding-top: 10px">
          <div class="left">
            <span style="position: relative; top: -13px;left: -8px">头像: </span>
            <img style="border-radius: 50%; width: 45px; height: 45px;" :src="userInfo.icon" alt="">
          </div>
          <div class="right">
            <el-upload
              style="position: relative; top: 10px;right: 10px;"
              name="myUploadFile"
              :headers="getHeader()"
              :action="UploadFileUrl"
              :show-file-list="false"
              :on-success="successUpload">
              <el-button size="small" type="primary">修改头像</el-button>
            </el-upload>
          </div>
          <div class="c"></div>
        </div>

        <div class="item" @click="changeInfo('nickname')">
          <div class="left">
            姓名:
            <span v-text="userInfo.nickname"></span>
          </div>
          <div class="right">
            <i class="el-icon-arrow-right"></i>
          </div>
          <div class="c"></div>
        </div>

<!--        <div class="item" @click="changeInfo('sex')">-->
<!--          <div class="left">-->
<!--            性别:-->
<!--            <span v-text="userInfo.sex"></span>-->
<!--          </div>-->
<!--          <div class="right">-->
<!--            <i class="el-icon-arrow-right"></i>-->
<!--          </div>-->
<!--          <div class="c"></div>-->
<!--        </div>-->



      </div>


    </div>
  </div>
</template>

<script>
export default {
  name: 'MemberInfo',
  data:function () {
    return {
      userInfo:{
        icon:'',
        sex:'男',
        nickname:'-',
      }
    }
  },
  mounted () {
    let $this=this
    setTimeout(function () {
      $this.getInfo()
    },500)
  },
  methods:{
    // 获取-个人信息
    getInfo: function () {
      let $this = this
      $this.MyRequest($this.ApiDoNameShop + 'Shop/info', {}, function (data) {
        // console.log('data1',data)
        // console.log(data)
        $this.userInfo.nickname=data.clerk.nickname
        $this.userInfo.icon=data.clerk.icon
        $this.userInfo.sex=data.clerk.sex
        $this.$forceUpdate()
      })
    },
    changeInfo:function (type) {
      switch (type){
        case 'nickname':
          this.changeNickname()
          break
        case 'sex':
          this.changeSex()
          break
      }
    },
    // 上传成功
    successUpload: function (res) {
      let $this=this
      if (res.code === 0) {
        $this.requestUpdate({icon:res.data})
      } else {
        this.successTip(res.message, "error")
      }
    },
    // 更改-昵称
    changeNickname:function () {
      this.$prompt('修改昵称:', '系统提示', {
        customClass:'my-prompt-box',
        inputValue:this.userInfo.nickname,
        inputPattern:/^[\u4E00-\u9FA5A-Za-z0-9]{1,20}$/,
        inputErrorMessage:'昵称必须是由(中文,字母,数字)组成，长度(1,20)位',
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(({ value }) => {
        this.requestUpdate({nickname:value})
      }).catch(() => {
      });
    },
    // 更改-性别
    changeSex:function () {
      let $this = this
      $this.bus.$emit('ChooseSexDialogCallBus',$this.userInfo.sex,function (sex) {
        $this.requestUpdate({sex:sex})
      })
    },
    // 更改-生日
    changeBirthday:function () {
      let $this = this
      $this.bus.$emit('ChooseDateDialogCallBus',$this.userInfo.birthday,function (birthday) {
        $this.requestUpdate({birthday:birthday})
      })
    },
    // 发起-更新
    requestUpdate:function (form){
      let $this = this
      $this.MyRequest($this.ApiDoNameShop + 'Shop/updateClerkInfo', form, function (data) {
        $this.successTip("更改成功")
        $this.getInfo()
        $this.$forceUpdate()
      }, function (msg) {
        $this.$message.error(msg)
        // $this.form.password = ''
      })
    },
  }
}
</script>

<style scoped>

</style>
